<template>
	<view :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>initAnimation</view>
				<view>Boolean</view>
				<view>	</view>
				<view>初始化时是否启用动画，H5时默认开启。微信小程序canvas有性能问题，默认关闭</view>
			</view>
			<view class="tr">
				<view>radius</view>
				<view>String</view>
				<view>80rpx</view>
				<view>圆环半径，需带单位</view>
			</view>
			<view class="tr">
				<view>barWidthPercent</view>
				<view>Number</view>
				<view>10</view>
				<view>圆环环宽，相对于圆环直径的百分比数值</view>
			</view>
			<view class="tr">
				<view>type</view>
				<view>String</view>
				<view>primary</view>
				<view>圆环颜色主题</view>
			</view>
			<view class="tr">
				<view>barColor</view>
				<view>String, Object</view>
				<view>无</view>
				<view>自定义圆环色。纯色格式：#eee。渐变色格式：{"0":"#f00", "100":"#ff0"}</view>
			</view>
			<view class="tr">
				<view>barColorAngle</view>
				<view>Number</view>
				<view>0</view>
				<view>圆环渐变色角度，自定义圆环色为渐变色格式时有效</view>
			</view>
			<view class="tr">
				<view>barColorActive</view>
				<view>Boolean</view>
				<view>false</view>
				<view>圆环动态渐变色，随进度变更圆环色。自定义圆环色为渐变色格式时有效</view>
			</view>
			<view class="tr">
				<view>barBgColor</view>
				<view>String</view>
				<view>#eee</view>
				<view>圆环底色</view>
			</view>
			<view class="tr">
				<view>startAngle</view>
				<view>Number</view>
				<view>0</view>
				<view>圆环绘画起始角度</view>
			</view>
			<view class="tr">
				<view>autoStart</view>
				<view>Boolean</view>
				<view>true</view>
				<view>圆环初始自动绘画。如果关闭需手动执行start()绘画圆环</view>
			</view>
			<view class="tr">
				<view>duration</view>
				<view>Number</view>
				<view>1500</view>
				<view>圆环绘画一圈所需时间。单位毫秒</view>
			</view>
			<view class="tr">
				<view>frameRate</view>
				<view>Number</view>
				<view>60</view>
				<view>圆环绘画帧率。一般不需要更改，帧率过高会使动画延迟</view>
			</view>
			<view class="tr">
				<view>decimal</view>
				<view>Number</view>
				<view>0</view>
				<view>圆环显示小数位，用于默认中间数值显示</view>
			</view>
			<view class="tr">
				<view>barBgSpeedRate</view>
				<view>Number</view>
				<view>3</view>
				<view>圆环底相对于圆环绘画速度的倍率</view>
			</view>
			<view class="tr">
				<view>@start</view>
				<view>事件</view>
				<view>	</view>
				<view>圆环开始绘画事件，无提交参数</view>
			</view>
			<view class="tr">
				<view>@stop</view>
				<view>事件</view>
				<view>	</view>
				<view>圆环绘画结束事件，无提交参数</view>
			</view>
			<view class="tr">
				<view>start</view>
				<view>function</view>
				<view>	</view>
				<view>使用refs调用，圆环开始绘画或重新绘画</view>
			</view>
		</view>
		
		<view class="p-sm">
			<view class="py-sm color-error">
				除H5外，多个canvas执行，性能都很差
			</view>
			<view class="py-sm">
				基本使用：
				<view class="">
					{{'&lt;vi-circle :value="百分比数值">&lt;/vi-circle>'}}
				</view>
			</view>
			<view class="py-sm fbox V">
				<vi-circle id="c1" :value="15"></vi-circle>
				<view class="fbox">默认，第一主题色</view>
			</view>
			<view class="py-sm fbox V">
				<vi-circle id="c2" :value="25" type="second"></vi-circle>
				<view class="fbox">第二主题色 type=second</view>
			</view>
			<view class="py-sm fbox V">
				<vi-circle id="c3" :value="35" type="thir"></vi-circle>
				<view class="fbox">第三主题色 type=thir</view>
			</view>
			<view class="py-sm fbox V">
				<vi-circle id="c4" :value="45" type="fourth"></vi-circle>
				<view class="fbox">第四主题色 type=fourth</view>
			</view>
			<view class="py-sm fbox V">
				<vi-circle id="c5" :value="55" type="fifth"></vi-circle>
				<view class="fbox">第五主题色 type=fifth</view>
			</view>
			<view class="py-sm fbox V">
				<vi-circle id="c6" :value="65" barColor="#999"></vi-circle>
				<view class="fbox">自定义颜色 barColor=#999</view>
			</view>
			<view class="py-sm fbox V">
				<vi-circle id="c7" :value="75" barBgColor="#cdf"></vi-circle>
				<view class="fbox">自定义底色 barBgColor=cdf</view>
			</view>
			<view class="py-sm fbox V">
				<vi-circle id="c8" :value="85" :barColor="{'0':'#ee0', '100':'#e50'}"></vi-circle>
				<view class="fbox">渐变色 barColor={'0':'#ee0', '100':'#e50'}</view>
			</view>
			<view class="py-sm fbox V">
				<vi-circle id="c9" :value="85" :barColor="{'0':'#ee0', '100':'#e50'}" :barColorAngle="60"></vi-circle>
				<view class="fbox">渐变色角度 barColorAngle=60</view>
			</view>
			<view class="py-sm fbox V">
				<vi-circle id="c10" ref="actRing" :value="100" :barColor="{'0':'#f00', '50':'#0f0', '100':'#00f'}" barColorActive></vi-circle>
				<view class="fbox V x-full">
					<vi-button size="sm" class="py-sm" @click="start">开始</vi-button>
					<text>动态渐变色 barColorActive=true</text>
				</view>
			</view>
			<view class="py-sm fbox V">
				<vi-circle id="c11" :value="100" :radius="150"></vi-circle>
				<view class="fbox">自定义圆环大小 radius=150</view>
			</view>
			<view class="py-sm fbox V">
				<vi-circle id="c12" :value="100" :barWidthPercent="5"></vi-circle>
				<view class="fbox">自定义环宽 barWidthPercent=5</view>
			</view>
			<view class="py-sm fbox V">
				<vi-circle id="c13" :value="100" :barColor="{'0':'#ee0', '100':'#e50'}" :startAngle="180"></vi-circle>
				<view class="fbox">起始角度 startAngle=180</view>
			</view>
			<view class="py-sm fbox V">
				<vi-circle id="c14" :value="75" :decimal="1"></vi-circle>
				<view class="fbox">小数位 decimal=1</view>
			</view>
			<view class="py-sm fbox V">
				<vi-circle id="c15" :value="75">标题栏</vi-circle>
				<view class="fbox">自定义圆环中心内容 使用slot</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			start(){
				this.$refs.actRing.start()
			}
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
